<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item v-if="showMs">
          <el-select
            v-model="dataForm.islandId"
            placeholder="所属区域"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="item in scenicOptions"
              :key="item.id"
              :label="item.scenicName"
              :value="item.scenicName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showMs">
          <el-select
            v-model="dataForm.homestayId"
            placeholder="关联民宿"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in homestays"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.houseBaseId"
            placeholder="关联房型"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in roomTypes"
              :key="index"
              :label="item.name"
              :value="item.houseBaseId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.actionType"
            placeholder="客房状态"
            clearable
          >
            <el-option
              :value="item.val"
              v-for="item in roomStatus"
              :key="item.val"
              :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="guestSourceId">
          <el-select
            v-model="dataForm.guestSourceId"
            placeholder="客户来源"
            clearable
          >
            <el-option
              v-for="item in laiyuan"
              :key="item.id"
              :label="item.guestSource"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            type="text"
            v-model="dataForm.roomNumber"
            placeholder="房号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            type="text"
            v-model="dataForm.checkinPerson"
            placeholder="联系人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.checkInPhone"
            placeholder="联系电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.orderCode"
            placeholder="请输入订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.processDateStart"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dataForm.processDateEnd"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  v-if="$hasPermission('hotel:report:checkinOut')" type="primary" @click="exportHandle()">{{
            $t("export")
          }}</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        height="calc(100vh - 340px)"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          prop="actionType"
          label="类型"
          header-align="center"
          min-width="150"
          align="center"
        >
          <template slot-scope="scoped">
            <el-link>{{
              scoped.row.actionType == 2 ? "入住" : "退房"
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderCode"
          label="订单编号"
          header-align="center"
          min-width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="islandName"
          label="所属区域"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="homestayName"
          label="所属酒店民宿"
          header-align="center"
          min-width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="guestName"
          label="联系人"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="guestPhone"
          label="联系方式"
          header-align="center"
          min-width="120"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="houseBaseName"
          label="房型"
          header-align="center"
          min-width="150"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="roomNumber"
          label="房号"
          min-width="120px"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="totalExpense"
          label="房费"
          min-width="120px"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orderNums"
          label="订单数"
          min-width="120px"
          sortable="custom"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="arriveDate"
          label="到达时间"
          header-align="center"
          align="center"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="leaveDate"
          label="离开时间"
          header-align="center"
          align="center"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="guestSourceName"
          label="客户来源"
          header-align="center"
          align="center"
        ></el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: "/hotel/report/getCheckinOutDetailList",
        getDataListIsPage: true,
        exportURL: "/hotel/report/exportCheckinOut",
      },
      roomStatus: [
        {
          val: 2,
          label: "入住",
        },
        {
          val: 3,
          label: "退房",
        },
      ],
      homestays: [],
      roomTypes: [],
      scenicOptions: [],
      laiyuan: [],
      showMs: false,
      dataForm: {
        homestayId: this.$store.state.user.homestayId || "",
        actionType: "",
        processDateStart: "",
        processDateEnd: "",
        guestSourceId: "",
        roomNumber: "",
        houseBaseId: "",
        islandId: "",
        orderCode: "",
        checkinPerson: "",
        checkInPhone: "",
      },
    };
  },
  watch: {
    "dataForm.homestayId": {
      handler(newval, oldval) {
        if (newval && newval != oldval) {
          this.getRoomType();
        } else {
          this.roomTypes = [];
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getLaiyuan();
    this.getHomestay();
    this.getScenicOptions();
    this.getScenicOptions();
    if (
      this.$store.state.user.roleList &&
      this.$store.state.user.roleList.indexOf("1712742759269081090") > -1
    ) {
      this.showMs = true;
    }
  },
  methods: {
    getHomestay() {
      this.$http
        .get("/hotel/homestay/getHomestayDownBox")
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.homestays = res.data;
          }
        });
    },
    getRoomType() {
      this.$http
        .get(
          "/hotel/house/base/getHouseSearchBox/" + this.dataForm.homestayId
        )
        .then(({ data: res }) => {
          if (res.code == 0) {
            this.roomTypes = res.data;
          }
        });
    },
    //岛屿
    getScenicOptions() {
      this.$http
        .get("scenic/isscenic/selectScenicList", {})
        .then(({ data: res }) => {
          if (res.msg == "success") {
            this.scenicOptions = res.data;
          }
        });
    },
    //获取来源
    getLaiyuan() {
      this.$http
        .get("/hotel/guest/page", {
          params: {
            homestayId: this.$store.state.user.homestayId,
            limit: 100,
            page: 1,
          },
        })
        .then((res) => {
          this.laiyuan = res.data.data.list;
        });
    },
  },
};
</script>
